<template>
  <div class="mine-container">
    <header>
      <div class="header-img">
        <img src="../assets/images/01.png" alt="">
      </div>
      <div class="user-info">
        <p>{{ username }}</p>
        <p @click="setNickname">{{ nickname }}</p>
      </div>
      <a href="javascript:;" class="sign">签到领积分</a>
      <div class="red">
        <span>每天领红包，年卡仅0.12元/天</span>
        <a href="javascript:;">立即开通</a>
      </div>
    </header>
    <div v-if="loginStatus">
      <div class="mine-t mine-all">
        <span class="t-txt">账号余额 <b>15.2</b>万元</span>
        <b>|</b>
        <span class="t-txt">积分 <b>3.6</b>万分</span>
      </div>
      <div class="mine-order mine-all">
        <div class="order-t">
          <p>我的订单</p>
          <a href="javascript:;">查看全部订单 ></a>
        </div>
        <ul class="order-list">
          <li>
            <dl>
              <dt><i class="iconfont icon-quanbudingdan"></i></dt>
              <dd class="order-num">758</dd>
              <dd>全部</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><i class="iconfont icon-daizhifu"></i></dt>
              <dd class="order-num">150</dd>
              <dd>待支付</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><i class="iconfont icon-daishouhuo icon-teshu"></i></dt>
              <dd class="order-num">352</dd>
              <dd>待收货</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><i class="iconfont icon-daipingjia icon-teshu"></i></dt>
              <dd class="order-num">255</dd>
              <dd>待评价</dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="mine-all">
        <img src="../assets/images/ad-001.png" alt="" width="100%">
      </div>
      <div class="comm-fun mine-all">
        <p class="common-txt">常用功能</p>
        <ul class="comm-list">
          <li>
            <dl @click="$router.push('/ship')">
              <dt><i class="iconfont icon-wodeshouhuodizhi"></i></dt>
              <dd>收货地址</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><i class="iconfont icon-wodeshoucang"></i></dt>
              <dd>我的收藏</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><i class="iconfont icon-liulanjilu icon-teshu"></i></dt>
              <dd>浏览记录</dd>
            </dl>
          </li>
          <li>
            <dl @click="$router.push('/setting')">
              <dt><i class="iconfont icon-shezhi icon-teshu"></i></dt>
              <dd>设置</dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <a class="out-login" @click="outLogin" href="javascript:;" v-if="loginStatus">{{ loginTxt }}</a>
    <a class="out-login" @click="goLogin" href="javascript:;" v-else>去登录</a>
    <Buttom class="bottom"></Buttom>
  </div>
</template>

<script>
import { getUserInfoApi } from '@/logrequest/api'
import Buttom from '@/components/home/Buttom.vue'
export default {
  data() {
    return {
      username: '',
      nickname: '未设置',
      loginStatus: false,
      loginTxt: '退 出 登 录'
    }
  },
  methods: {
    // 退出登录
    outLogin() {
      if (localStorage.getItem('token')) {
        this.$store.commit('openTitle', '即将返回首页！')
        setTimeout(() => {
          this.$router.push('/last')
        }, 1500)
        this.$store.dispatch('ToggleTitle')
        this.loginStatus = false
        this.username = '未登录'
        this.nickname = ''
        // 清空 localStorage
        localStorage.clear()
      } else {
        return
      }
    },
    setNickname() {},
    goLogin() {
      this.$router.push('/loginPage')
    }
  },
  components: {
    Buttom
  },
  created() {
    if (localStorage.getItem('token')) {
      this.loginStatus = true
      const id = localStorage.getItem('uid')
      getUserInfoApi(id).then(({ data: res }) => {
        this.username = res.data[0].username
        this.nickname = res.data[0].nickname
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mine-container {
  background-color: #efefef;
  height: 100vh;
  .bottom {
    position: fixed;
    bottom: 0;
  }
  .out-login {
    display: block;
    background-color: #fff;
    width: 95%;
    border-radius: 5px;
    margin: 20px auto;
    text-align: center;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    padding: 20px 0;
  }
  header {
    position: relative;
    height: 20vh;
    background-color: #0273ff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .header-img {
      width: 20%;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .user-info {
      width: 40%;
      color: #fff;
      p {
        line-height: 25px;
      }
    }
    .red {
      position: absolute;
      width: 80%;
      height: 22%;
      background-color: #38455d;
      bottom: 0;
      border-radius: 10px 10px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 12px;
        color: #fff;
        margin-left: 15px;
      }
      a {
        padding: 2px 10px;
        background-color: #21c050;
        margin-right: 15px;
        font-size: 12px;
        text-decoration: none;
        color: #000;
        border-radius: 50px;
      }
    }
    .sign {
      text-decoration: none;
      font-size: 12px;
      color: #fff;
      background-color: #ff6565;
      padding: 12px;
      border-radius: 50px;
    }
  }
  .mine-all {
    background-color: #fff;
    border-radius: 5px;
    width: 95%;
    margin: auto;
    margin-top: 10px;
  }
  .mine-t {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 15px;
    .t-txt {
      b {
        font-weight: 700;
      }
    }
  }
  .mine-order,
  .comm-fun {
    padding: 18px 0;
    .common-txt {
      font-size: 25px;
      font-weight: 700;
      margin-left: 15px;
      margin-bottom: 20px;
    }
    .order-t {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      margin-bottom: 20px;
      align-items: center;
      p {
        font-size: 25px;
        font-weight: 700;
      }
      a {
        text-decoration: none;
        color: #999999;
        font-size: 12px;
      }
    }
    .order-list,
    .comm-list {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      dl {
        position: relative;
        dt {
          text-align: center;
          margin-bottom: 5px;
          .iconfont {
            font-size: 25px;
            display: inline-block;
            margin-bottom: 5px;
          }
          .icon-teshu {
            font-size: 30px;
            margin-bottom: 0;
          }
        }
        .order-num {
          position: absolute;
          top: -13px;
          right: -25px;
          background-color: #f56c6c;
          padding: 2px 6px;
          border-radius: 50px;
          color: #fff;
        }
      }
    }
  }
}
</style>